<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			#div1{width: 200px; height: 200px; background-color: orange; position: absolute; left: 300px; top: 300px; margin-left: -50px; margin-top: -50px}
			#div2{width: 100px; height: 100px; background-color: green; position: absolute; left: 300px; top: 300px}
		</style>
		<script src = '../startMove.js'></script>
		<script>
			window.onload = function(){
				var oDiv2 = document.getElementById("div2");

				

				oDiv2.onmouseover = function(){
					startMove(oDiv2, {
						width: 200,
						height: 200,
						marginLeft: -50,
						marginTop: -50
					})
				}
				oDiv2.onmouseout = function(){
					startMove(oDiv2, {
						width: 100,
						height: 100,
						marginLeft: 0,
						marginTop: 0
					})
				}
			}z
		</script>
	</head>
	<body>
		<div id = 'div1'>
			
		</div>
		<div id = 'div2'></div>
	</body>
</html>